<template>
	<div class="user-info-container">
		<el-card class="print-box">
			<el-button
				type="primary"
				v-print="printObj"
				:loading="printLoading"
				>{{ $t('msg.userInfo.print') }}</el-button
			>
		</el-card>
		<el-card>
			<div id="userInfoBox" class="user-info-box">
				<!-- 标题 -->
				<h2 class="title">{{ $t('msg.userInfo.title') }}</h2>

				<div class="header">
					<!-- 头部渲染表格 -->
					<el-descriptions :column="2" border>
						<el-descriptions-item
							:label="$t('msg.userInfo.name')"
							>{{ detailData.username }}</el-descriptions-item
						>
						<el-descriptions-item :label="$t('msg.userInfo.sex')">{{
							detailData.gender
						}}</el-descriptions-item>
						<el-descriptions-item
							:label="$t('msg.userInfo.nation')"
							>{{ detailData.nationality }}</el-descriptions-item
						>
						<el-descriptions-item
							:label="$t('msg.userInfo.mobile')"
							>{{ detailData.mobile }}</el-descriptions-item
						>
						<el-descriptions-item
							:label="$t('msg.userInfo.province')"
							>{{ detailData.province }}</el-descriptions-item
						>
						<el-descriptions-item
							:label="$t('msg.userInfo.date')"
							>{{
								$filters.dateFilter(detailData.openTime)
							}}</el-descriptions-item
						>
						<el-descriptions-item
							:label="$t('msg.userInfo.remark')"
							:span="2"
						>
							<el-tag
								class="remark"
								size="small"
								v-for="(item, index) in detailData.remark"
								:key="index"
								>{{ item }}</el-tag
							>
						</el-descriptions-item>
						<el-descriptions-item
							:label="$t('msg.userInfo.address')"
							:span="2"
							>{{ detailData.address }}</el-descriptions-item
						>
					</el-descriptions>
					<!-- 头像渲染 -->
					<el-image
						class="avatar"
						:src="detailData.avatar"
						:preview-src-list="[detailData.avatar]"
					></el-image>
				</div>
				<div class="body">
					<!-- 内容渲染表格 -->
					<el-descriptions direction="vertical" :column="1" border>
						<el-descriptions-item
							:label="$t('msg.userInfo.experience')"
						>
							<ul>
								<li
									v-for="(
										item, index
									) in detailData.experience"
									:key="index"
								>
									<span>
										{{
											$filters.dateFilter(
												item.startTime,
												'YYYY/MM'
											)
										}}
										----
										{{
											$filters.dateFilter(
												item.endTime,
												'YYYY/MM'
											)
										}}</span
									>
									<span>{{ item.title }}</span>
									<span>{{ item.desc }}</span>
								</li>
							</ul>
						</el-descriptions-item>
						<el-descriptions-item :label="$t('msg.userInfo.major')">
							{{ detailData.major }}
						</el-descriptions-item>
						<el-descriptions-item :label="$t('msg.userInfo.glory')">
							{{ detailData.glory }}
						</el-descriptions-item>
					</el-descriptions>
				</div>
				<!-- 尾部签名 -->
				<div class="foot">{{ $t('msg.userInfo.foot') }}</div>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { userDetail } from '@/api/user-manage'
import { watchSwitchLang } from '@/utils/i18n'
import { defineProps, ref } from 'vue'

const props = defineProps({
	id: {
		type: String,
		required: true
	}
})

// 数据相关
const detailData = ref({})
const getUserDetail = async () => {
	detailData.value = await userDetail(props.id)
}
getUserDetail()
// 语言切换
watchSwitchLang(getUserDetail)

// 打印相关
const printLoading = ref(false)
const printObj = {
	// 打印区域
	id: 'userInfoBox',
	// 打印标题
	popTitle: 'imooc-vue-element-admin',
	// 打印前
	beforeOpenCallback(vue) {
		printLoading.value = true
	},
	// 执行打印
	openCallback(vue) {
		printLoading.value = false
	}
}
</script>

<style lang="scss" scoped>
.print-box {
	margin-bottom: 20px;
	text-align: right;
}
.user-info-box {
	width: 1024px;
	margin: 0 auto;
	.title {
		text-align: center;
		margin-bottom: 18px;
	}
	.header {
		display: flex;
		::v-deep .el-descriptions {
			flex-grow: 1;
		}
		.avatar {
			width: 187px;
			box-sizing: border-box;
			padding: 30px 20px;
			border: 1px solid #ebeef5;
			border-left: none;
		}
		.remark {
			margin-right: 12px;
		}
	}
	.body {
		ul {
			list-style: none;
			li {
				span {
					margin-right: 62px;
				}
			}
		}
	}
	.foot {
		margin-top: 42px;
		text-align: right;
	}
}
</style>
